<template>
  <div class="app-container bg-transparent">
    <info-card :info="eventInfo" />
    <div class="flex mt20">
      <flow
        :acc-id="id"
        class="event-flow"
        :flush="flush"
      />
      <div class="event-others">
        <related-task
          :acc-id="id"
          :corp-id="corpId"
          :flush="flush"
          class="event-related-task"
          @data-flush="handleFlush"
        />
        <files
          :acc-id="id"
          :flush="flush"
          class="event-files mt20"
          @data-flush="handleFlush"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import { getRole } from '@/api/system/role'
import InfoCard from '../components/AccidentInfoCard'
import Flow from '../components/AccidentFlow'
import RelatedTask from '../components/AccidentRelatedTask'
import Files from '../components/AccidentItems'
import {
  listAccident,
  getAccident,
  delAccident,
  addAccident,
  updateAccident,
  importAccident
} from '@/api/client/accident'

export default {
  name: 'AccidentDetail',
  components: { InfoCard, Flow, RelatedTask, Files },
  data() {
    return {
      loading: true,
      eventInfo: {},
      id: null,
      corpId: null,
      flush: 1
    }
  },
  created() {
    this.id = this.$route.params.id
    this.loadData()
  },
  methods: {
    /** 查询客户详细信息 */
    loadData() {
      getAccident(this.id).then((res) => {
        this.eventInfo = res.data
        this.corpId = res.data.corpId
        this.loading = false
      })
    },
    handleFlush() {
      this.flush++
      this.loadData()
    }
  }
}
</script>
<style lang="scss" scoped>
.event-flow {
  width: 50%;
}
.event-others {
  margin-left: 20px;
  flex-grow: 2;
}
</style>
